<template>
	<RadioGroup v-model="box.a">
		<Radio :label="1">栏目1</Radio>
		<Radio :label="2">栏目2</Radio>
	</RadioGroup>
	<div class="boxs">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>
	<div class="box"></div>
	<Button type="default">操作</Button>
</template>
<script>
import { watch } from 'vue';
class Box {
	constructor() {
	}
	init() {
		this.a = 1;
		watch(() => {
			return this.a
		}, (newValue, oldValue) => {
			console.log(newValue);
		})
	}
}
export default {
	data() {
		return {
			a: 1,
			b: 2,
			box: new Box()
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
		}
	},
	mounted() {
		this.box.init();
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.boxs {
	display: grid;
	grid-template-columns: repeat(auto-fit, 20px);
	justify-content: center;
	margin-right: 80px;
}
</style>
